<template>
    <el-popover
        trigger="click"
        placement="bottom-end"
        width="266px"
        :show-arrow="false"
    >
        <template #default>
            <div class="drop-popover">
                <span class="nickname">{{ myInfo?.user_name }}</span>
                <div class="user-follow">
                    <RouterLink to="/" class="user-follow-item">
                        <span>{{ myInfo?.following }}</span>
                        <span>关注</span>
                    </RouterLink>
                    <RouterLink to="/" class="user-follow-item">
                        <span>{{ myInfo?.follower }}</span>
                        <span>粉丝</span>
                    </RouterLink>
                    <RouterLink to="/" class="user-follow-item">
                        <span>12</span>
                        <span>收藏</span>
                    </RouterLink>
                </div>
                <div class="user-link">
                    <RouterLink :to="`/user/${myInfo?.user_id}`">
                        <i class="icon icon-user"></i>
                        <span>我的主页</span>
                        <i class="icon icon-arrow-right"></i>
                    </RouterLink>
                    <RouterLink to="/">
                        <i class="icon icon-setting"></i>
                        <span>设置</span>
                        <i class="icon icon-arrow-right"></i>
                    </RouterLink>
                    <a>
                        <i class="icon icon-sign-out"></i>
                        <span>退出登录</span>
                        <i class="icon icon-arrow-right"></i>
                    </a>
                </div>
            </div>
        </template>
        <template #reference>
            <!-- <avatar :is-word-avatar="true" :word="myInfo?.user_name"></avatar> -->
            <avatar :url="myInfo?.avatar"></avatar>
        </template>
    </el-popover>
</template>

<script lang="ts" setup>
import { UserInfoVo } from '@/types'
import avatar from '@/components/common/avatar.vue'
import { toRefs } from 'vue'
type PropsType = {
    myInfo: UserInfoVo | undefined
}

const props = defineProps<PropsType>()
const { myInfo } = toRefs(props)
</script>

<style lang="less" scoped>
.drop-popover {
    padding: 0 9px 9px 9px;
    .nickname {
        display: flex;
        justify-content: center;
        font-size: 18px;
        margin-bottom: 12px;
    }
    .user-follow {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12px;
        padding: 0 14px;
        .user-follow-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--color-text-p);
            &:hover {
                color: var(--color-primary);
            }
        }
    }
    .user-link {
        > a {
            display: flex;
            align-items: center;
            cursor: pointer;
            height: 38px;
            line-height: 38px;
            padding: 0 14px;
            border-radius: 8px;
            color: var(--color-text-s);
            user-select: none;
            transition: background-color 0.3s;
            > span {
                margin: 0 auto 0 16px;
            }
            &:hover {
                background-color: var(--color-gray-s);
                color: var(--color-text-p);
            }
        }
    }
}
</style>
